<template>
    <div class="json-formatter">
        <div class="container">
            <h1>JSON 格式化工具</h1>
            
            <div class="input-section">
                <div class="input-group">
                    <label for="json-input">输入 JSON 代码：</label>
                    <textarea 
                        id="json-input"
                        v-model="inputJson" 
                        placeholder="请输入要格式化的 JSON 代码..."
                        class="json-input"
                        rows="10"
                    ></textarea>
                </div>
                
                <div class="controls">
                    <button @click="formatJson" class="btn btn-primary">格式化</button>
                    <button @click="minifyJson" class="btn btn-secondary">压缩</button>
                    <button @click="validateJson" class="btn btn-info">验证</button>
                    <button @click="clearAll" class="btn btn-danger">清空</button>
                    <button @click="copyToClipboard" class="btn btn-success">复制结果</button>
                </div>
                
                <div class="options">
                    <label class="option">
                        <input type="checkbox" v-model="useTabs"> 使用制表符缩进
                    </label>
                    <label class="option">
                        <input type="number" v-model="indentSize" min="1" max="8"> 缩进大小
                    </label>
                </div>
            </div>
            
            <div class="output-section">
                <div class="output-group">
                    <label for="json-output">格式化结果：</label>
                    <div class="output-container">
                        <pre id="json-output" class="json-output">{{ formattedJson }}</pre>
                        <div v-if="!formattedJson" class="placeholder">格式化后的 JSON 将显示在这里</div>
                    </div>
                </div>
            </div>
            
            <div class="status-section">
                <div v-if="errorMessage" class="error-message">
                    <strong>错误：</strong> {{ errorMessage }}
                </div>
                <div v-if="successMessage" class="success-message">
                    {{ successMessage }}
                </div>
                <div v-if="validationResult" class="validation-result">
                    <strong>验证结果：</strong> {{ validationResult }}
                </div>
            </div>
            
            <div class="stats-section">
                <div class="stats">
                    <span>字符数: {{ inputJson.length }}</span>
                    <span>行数: {{ lineCount }}</span>
                    <span>大小: {{ fileSize }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useUiStore } from '@/stores/ui'

const ui = useUiStore()

const inputJson = ref('')
const formattedJson = ref('')
const errorMessage = ref('')
const successMessage = ref('')
const validationResult = ref('')
const useTabs = ref(false)
const indentSize = ref(2)

// 计算属性
const lineCount = computed(() => {
    return inputJson.value.split('\n').length
})

const fileSize = computed(() => {
    const bytes = new Blob([inputJson.value]).size
    if (bytes < 1024) return bytes + ' B'
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
})

// 监听输入变化
watch(inputJson, () => {
    errorMessage.value = ''
    successMessage.value = ''
    validationResult.value = ''
})

// 格式化 JSON
const formatJson = () => {
    try {
        if (!inputJson.value.trim()) {
            errorMessage.value = '请输入 JSON 代码'
            return
        }
        
        const parsed = JSON.parse(inputJson.value)
        const indentChar = useTabs.value ? '\t' : ' '
        formattedJson.value = JSON.stringify(parsed, null, indentChar.repeat(indentSize.value))
        errorMessage.value = ''
        successMessage.value = 'JSON 格式化成功！'
    } catch (error) {
        errorMessage.value = error.message
        formattedJson.value = ''
    }
}

// 压缩 JSON
const minifyJson = () => {
    try {
        if (!inputJson.value.trim()) {
            errorMessage.value = '请输入 JSON 代码'
            return
        }
        
        const parsed = JSON.parse(inputJson.value)
        formattedJson.value = JSON.stringify(parsed)
        errorMessage.value = ''
        successMessage.value = 'JSON 压缩成功！'
    } catch (error) {
        errorMessage.value = error.message
        formattedJson.value = ''
    }
}

// 验证 JSON
const validateJson = () => {
    try {
        if (!inputJson.value.trim()) {
            errorMessage.value = '请输入 JSON 代码'
            return
        }
        
        JSON.parse(inputJson.value)
        validationResult.value = 'JSON 格式正确！'
        errorMessage.value = ''
        successMessage.value = '验证通过！'
    } catch (error) {
        validationResult.value = 'JSON 格式错误：' + error.message
        errorMessage.value = error.message
    }
}

// 清空所有内容
const clearAll = () => {
    inputJson.value = ''
    formattedJson.value = ''
    errorMessage.value = ''
    successMessage.value = ''
    validationResult.value = ''
}

// 复制到剪贴板
const copyToClipboard = async () => {
    if (!formattedJson.value) {
        errorMessage.value = '没有内容可复制'
        ui.showToast('没有内容可复制', 'error')
        return
    }
    
    try {
        await navigator.clipboard.writeText(formattedJson.value)
        successMessage.value = '已复制到剪贴板！'
        ui.showToast('已复制到剪贴板！', 'success')
    } catch (error) {
        errorMessage.value = '复制失败：' + error.message
        ui.showToast('复制失败：' + error.message, 'error')
    }
}
</script>

<style lang="scss" scoped>
.json-formatter {
    min-height: 100vh;
    background: var(--color-bg);
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

h1 {
    color: var(--color-primary);
    background: transparent;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
}

.input-section, .output-section, .status-section, .stats-section {
    padding: 30px;
    border-bottom: 1px solid var(--color-border);
}

.input-group, .output-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 1.1rem;
}

.json-input, .json-output {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.3s ease;
    
    &:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }
}

.json-output {
    background: #f8f9fa;
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.output-container {
    position: relative;
}

.placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-style: italic;
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    &:active {
        transform: translateY(0);
    }
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-secondary {
    background: #6b7280;
    color: white;
}

.btn-info {
    background: var(--color-info);
    color: white;
}

.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.options {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 0;
}

.option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
}

.option input[type="number"] {
    width: 60px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.status-section {
    min-height: 60px;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #dc3545;
}

.success-message {
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #28a745;
}

.validation-result {
    background: #d1ecf1;
    color: #0c5460;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #17a2b8;
}

.stats-section {
    background: #f8f9fa;
}

.stats {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.stats span {
    background: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    color: var(--color-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .json-formatter {
        padding: 10px;
    }
    
    h1 {
        font-size: 2rem;
        padding: 20px;
    }
    
    .input-section, .output-section, .status-section, .stats-section {
        padding: 20px;
    }
    
    .controls {
        flex-direction: column;
    }
    
    .options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}
</style>